echarts的map阴影效果

2023-11-21 20:28| 来源: 网络整理| 查看: 265

1、需求：要求地图有阴影效果

2、思路：用geo创建一毛一样的底图加上阴影，放在series的图下面，缺点就是不能用鼠标移动放大缩小，不然就暴露了下面的geo底图。

3、实现：

let option = { visualMap: { bottom: '10px', left: 'right', right: '60px', min: 0, max: this.max, inRange: { color: ['#154C91', '#32C5F6', '#24E3FA', '#13F1FC'] }, calculable: true }, series: [ { type: 'map', roam: false, map: 'mapJson', layoutCenter: ['45%', '80%'], layoutSize: '90%', left: '20px', top: 'bottom', itemStyle: { borderColor: '#2F8AE8' }, label: { //地图默认的文本属性 show: false, color: '#2998E8' }, select: { //选中的区域文本属性 label: { color: '#2998E8' }, itemStyle: { color: '#3066ba' } }, emphasis: { //高亮的区域文本属性 itemStyle: { areaColor: '#3066ba' }, label: { show: true, textStyle: { color: '#2998E8' } } }, zoom: 1.4, // 文本位置修正 textFixed: { Alaska: [20, -20] }, data: this.mapValueData } ], geo: { type: 'map', roam: false, map: 'mapJson', layoutCenter: ['45%', '80%'], layoutSize: '90%', left: '20px', top: 'bottom', itemStyle: { normal: {//阴影 areaColor: '#013C62', shadowColor: '#01273F', shadowOffsetX: 0, shadowOffsetY: 25 }, borderColor: '#2F8AE8' }, label: { //地图默认的文本属性 show: false, color: '#2998E8' }, select: { //选中的区域文本属性 label: { color: '#2998E8' }, itemStyle: { color: '#3066ba' } }, emphasis: { //高亮的区域文本属性 itemStyle: { areaColor: '#3066ba' }, label: { show: true, textStyle: { color: '#2998E8' } } }, zoom: 1.4, // 文本位置修正 textFixed: { Alaska: [20, -20] } } }

4、效果

【本文地址】

公司简介

联系我们